<template>
    <view class="page savepadding">
        <view class="card" style="margin-top: 20upx;">
            <view class="list">
                <view class="label">
                    <text style="white-space: nowrap;">车系</text>
                    <text style="color:red">*</text>
                </view>
                <view class="right">
                    <text>{{brandName}} {{seriesName}}</text>
                    <!-- <u-icon name="arrow-right"></u-icon> -->
                </view>
            </view>
            <view class="list">
                <view class="label">
                    <text style="white-space: nowrap;">车型</text>
                    <text style="color:red">*</text>
                </view>
                <view class="right">
                    <text>{{modelName}}</text>
                    <!-- <u-icon name="arrow-right"></u-icon> -->
                </view>
            </view>
            <view class="list">
                <view class="label">
                    <text style="white-space: nowrap;">姓名</text>
                    <text style="color:red">*</text>
                </view>
                <view class="right">
                    <!-- <text>{{formData.contact}}</text> -->
                    <u--input v-model="formData.contact" :customStyle="{'padding-right':'0'}" inputAlign="right" placeholder="请输入"></u--input>
                </view>
            </view>
            <view class="list">
                <view class="label">
                    <text style="white-space: nowrap;">联系电话</text>
                    <text style="color:red">*</text>
                </view>
                <view class="right">
                    <!-- <text>{{formData.phone}}</text> -->
                    <u--input v-model="formData.phone" :customStyle="{'padding-right':'0'}" inputAlign="right"></u--input>
                </view>
            </view>
        </view>

        <view class="card-title">预约门店</view>
        <StoreCard :storeName="storeInfo.storeName" :storeAddress="storeInfo.contactAddress" :distance="storeInfo.distanceDesc" :phone="storeInfo.contactTel" :latitude="storeInfo.unitLat" :longitude="storeInfo.unitLon"></StoreCard>

        <!-- 底部按钮 -->
        <view class="bottom-button savepadding" @click="submit">提交</view>
    </view>
</template>

<script>
import * as HomeApi from '@/common/apis/home-api';
import StoreCard from '@/components/card/store-card.vue';


export default {
    components: {
        StoreCard,
    },
    data() {
        return {
            formData: {
                token: "",
                contact: "", // 联系人
                phone: "", // 手机号
                modelId: "", // 车型id
                storeId: "", // 门店id
                reserveContent: "询问价格", // 备注
                reserveContent: "询问价格", // 备注
            },
            brandName: "",  // 品牌名称
            seriesName: "",  // 车系名称
            modelName: "",  // 车型名称
        }
    },
    computed: {
        openid() {
            return this.$store.state.user.openid;
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        },
        storeInfo() {
            return this.$store.state.app.storeInfo
        },
    },
    onLoad(op) {
        this.formData.token = this.openid; // 默认传用户openid
        this.formData.contact = this.userInfo.nickName; // 联系人
        this.formData.phone = this.userInfo.phone; // 手机号
        this.formData.storeId = this.storeInfo.storeId; // 门店id
        this.formData.modelId = op.modelId; // 车型id
        this.formData.schemeId = op.schemeId; // 车型id
        this.brandName = op.brandName; // 品牌名称
        this.seriesName = op.seriesName; // 车系名称
        this.modelName = op.modelName; // 车型名称
    },
    methods: {
        async submit() {
            if (!/^1[3456789]\d{9}$/.test(this.formData.phone)){
                uni.showToast({
                    title: '手机号错误',
                    icon: 'error',
                    duration: 2000
                });
                return;
            }
			
			if(uni.$u.test.isEmpty(this.formData.contact)){
				uni.showToast({
					title:'请输入姓名',
					icon:'error'
				})
				return;
			}
			
            try {
                const result = HomeApi.cluessourcedriver(this.formData);
                uni.showToast({ title: '提交成功', icon: 'success' });
                setTimeout(() => {
                    uni.navigateBack()
                }, 1000);
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        
    }
}
</script>

<style lang="scss" scoped>
.page {
    padding: $page_padding;
    padding-bottom: 100upx;
}
.card {
    padding: 32upx 36upx;
    background: #fff;
    border-radius: 16upx;
    margin-bottom: 45upx;
}

.list {
    display: flex;
    justify-content: space-between;
    font-size: 28upx;
    font-weight: bold;
    color: #333;
	height: 50upx;
	align-items: center;
    // margin-bottom: 27upx;

    .right {
        display: flex;
    }
	
	.label{
		display: flex;
		align-items: center;
	}
}

.card-title {
    font-size: 28upx;
    font-weight: bold;
    margin-bottom: 30upx;
}

.title {
    font-size: 26upx;
    font-weight: bold;
    color: #333;
    margin-bottom: 19upx;
}

.desc {
    font-size: 24upx;
    color: #999;
    margin-bottom: 30upx;
}

.distance {
    font-size: 26upx;
    font-weight: bold;
    color: #333;
    text {
        color: #999;
        margin-right: 10upx;
    }
}

.icons {
    display: flex;
    width: 200upx;
    justify-content: space-between;
}

.bottom-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    line-height: 96upx;
    background: #12baa4;
    text-align: center;
    color: #fff;
}
</style>
